<script lang="ts" setup>
    import {
        SearchOutlined,
        FormOutlined,
        PlusOutlined,
        DeleteOutlined
    } from '@ant-design/icons-vue';
    import {reactive,onMounted} from 'vue'
    import { Modal } from 'ant-design-vue';
    import {getProductList,deleteProduct} from '@/service/product/index.ts'
    import EditForm from './form/editForm.vue'
    import dayjs from "dayjs";
    //@ts-ignore
    import  {defaultColumns,editMode} from './const.js'

    import {globalEnv} from '@/utils/index.ts'

    const state=reactive({
        env:globalEnv(),
        loading:false,
        title:'管理',
        name:'',
        columns:defaultColumns,
        productList:[],
        pagination: {
            showSizeChanger:true,
            pageSizeOptions:['3', '6', '9'],
            total: 3,
            current: 1,
            pageSize: 3,
        },
        visible:false,
        currentRecord:{},
        mode:editMode.add,
        deleteTitle:'是否删除',
        deleteVisible:false,
        deleteRecord:{},
        deleteLoading:false

    })
    const searchProductAction=async ()=>{
        state.loading=true
        try{

            const res=await getProductList({
                name:state.name,
                pageSize:state.pagination.pageSize,
                page:state.pagination.current
            });
            console.log('res',res)
            state.productList=res.data.data?.map(item=>{
                if(item.create_time){
                    item.create_time=dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss')
                }

                if(item.update_time){
                    item.update_time=dayjs(item.update_time).format('YYYY-MM-DD HH:mm:ss')
                }
                return item
            })
            state.pagination.total=res.data.total
        }
        catch (e) {
            console.error(e)
            state.productList=[]
            state.pagination.total=0
        }
        finally {
            state.loading=false
        }
    };

    const searchBtn=()=>{
        searchProductAction()
    }

    const handleTableChange=({ pageSize, current })=>{

        state.pagination.current=current
        state.pagination.pageSize=pageSize
        searchBtn()
    }

    const addBtn=()=>{
        state.currentRecord={}
        state.mode=editMode.add
        state.visible=true
    }

    const editBtn=(column)=>{
        console.log('column',column)
        state.currentRecord={...column}
        state.mode=editMode.edit
        state.visible=true

        console.log('visible',state.visible)
    }

    const afterClose=()=>{
        state.visible=false
    }

    const confirm=()=>{
        afterClose()
        searchBtn()
    }

    const confirmDelete=()=>{
        const id=state.deleteRecord.id
        return new Promise(async (resolve) => {
            state.deleteLoading=true
            try{
                await deleteProduct({id})
                searchBtn()
                afterCloseDelete()
            }
            catch (e) {
                console.error(e)
            }
            state.deleteLoading=false
            resolve('')
        })
    }

    const deleteBtn=(record)=>{
        state.deleteRecord=record
        state.deleteTitle= `是否删除“${record.title}”`;
        state.deleteVisible=true
    }

    const afterCloseDelete=()=>{
        state.deleteVisible=false
    }

    const mediaSrc=(id)=>{
        const url=state.env.VITE_APP_HOST+`/cloudApi/api/media/render?id=${id}`;
        return url
    }

    onMounted(()=>{
        searchBtn()
    })
</script>

<template>
<div>
<!--    <div>-->
<!--        {{state.title}}-->
<!--    </div>-->
    <div>
        <a-row>
            <a-col :span="12">
                <a-input v-model:value="state.name" placeholder="输入名称搜索" allowClear />
            </a-col>
            <a-col :span="12" style="padding-left: 20px">
                <a-button type="primary" @click="searchBtn">          <search-outlined />查询</a-button>
                <a-button type="primary" @click="addBtn"  style="margin-left: 20px"><plus-outlined />添加</a-button>
            </a-col>
        </a-row>
    </div>
    <div style="margin: 10px 0;">
        <a-table :dataSource="state.productList"
                 :row-key="record => record.id"
                 :pagination="state.pagination"
                 :loading="state.loading"
                 @change="handleTableChange"
                 :columns="state.columns"
                 :scroll="{ x: 1200, y: 500 }"
                 bordered
        >
            <template #bodyCell="{ column, text,record }">
                <template v-if="column.dataIndex === 'img'">
                    <a-image :alt="record.title" :src="record.img" />
                </template>
                <template v-if="column.dataIndex === 'img_id'">
                    <a-image :alt="record.title" :src="mediaSrc(record.img_id)" />
                </template>
                <template v-if="column.dataIndex === 'mov_id'">
                    <video controls width="250">

                        <source :src="mediaSrc(record.mov_id)" type="video/mp4" />
                        Download the
                        <a :href="state.src">MP4</a>
                        video.
                    </video>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                    <div>
                        <a-button type="primary" @click="editBtn(record)">
                            <form-outlined />编辑</a-button>
                        <a-button type="danger" style="margin-left:10px" @click="deleteBtn(record)"><delete-outlined />删除</a-button>
                    </div>
                </template>
            </template>
        </a-table>
    </div>
    <div>
        <EditForm :visible="state.visible"  @afterClose="afterClose" :record="state.currentRecord" :mode="state.mode" @confirm="confirm"/>
    </div>
    <a-modal title="确认删除"
             v-model:visible="state.deleteVisible"
             :afterClose="afterCloseDelete"
             :loading="state.deleteLoading"
             @ok="confirmDelete"
    >
        {{state.deleteTitle}}
    </a-modal>
</div>
</template>
